<template>
  <div class="pageWrap">
  <div class="pageTableInner">
    <div class="infoSearchWrap">
      <div class="infoSearchOne">
        <el-row :gutter="20">
          <el-col :span="6">
              <div class="searchWrap">
                <el-row :gutter="30">
                  <el-col :span="6">
                   <span class="searchFont">案件来源：</span>
                  </el-col>
                  <el-col :span="18">
                    <el-input
                      placeholder="请输入查询条件"
                      clearable
                      v-model="searchElectricInfo.vehicleNo"
                      size="mini"
                    >
                    </el-input>
                  </el-col>
                </el-row>
              </div>
          </el-col>
          <el-col :span="6">
              <div class="searchWrap">
                <el-row :gutter="30">
                  <el-col :xs="12" :sm="10" :md="6" :lg="6">
                   <span class="searchFont">案件类型：</span>
                  </el-col>
                  <el-col :xs="12" :sm="14" :md="18" :lg="18">
                    <el-input
                      placeholder="请输入查询条件"
                      clearable
                      v-model="searchElectricInfo.vehicleNo"
                      size="mini"
                    >
                    </el-input>
                  </el-col>
                </el-row>
            </div>
          </el-col>
          <el-col :span="6">
              <div class="searchWrap">
                <el-row :gutter="30">
                  <el-col :xs="12" :sm="10" :md="6" :lg="6">
                   <span class="searchFont">案件性质：</span>
                  </el-col>
                  <el-col :xs="12" :sm="14" :md="18" :lg="18">
                      <el-input
                        placeholder="请输入查询条件"
                        clearable
                        v-model="searchElectricInfo.vehicleNo"
                        size="mini"
                      >
                      </el-input>
                  </el-col>
                </el-row>
              </div>
          </el-col>
          <el-col :span="6">
            <div class="searchWrap">
              <el-row :gutter="30">
                <el-col :xs="12" :sm="10" :md="6" :lg="6">
                  <span class="searchFont">案件性质：</span>
                </el-col>
                <el-col :xs="12" :sm="14" :md="18" :lg="18">
                  <el-input
                    placeholder="请输入查询条件"
                    clearable
                    v-model="searchElectricInfo.vehicleNo"
                    size="mini"
                  >
                  </el-input>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="infoSearchOne">
        <el-row :gutter="20">
          <el-col :span="5">
              <div class="searchWrap">
                <el-row :gutter="35">
                  <el-col :xs="12" :sm="10" :md="7" :lg="7">
                   <span class="searchFont">发布状态：</span>
                  </el-col>
                  <el-col :xs="12" :sm="14" :md="17" :lg="17">
                      <el-select v-model="searchElectricInfo.labelStatus" size="mini" clearable placeholder="全部">
                        <el-option
                          v-for="item in options1"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                  </el-col>
                </el-row>
              </div>

          </el-col>
          <el-col :span="5" :offset="1">
              <div class="searchWrap">
                <el-row :gutter="40">
                  <el-col :xs="12" :sm="10" :md="7" :lg="7">
                   <span class="searchFont">审核状态：</span>
                  </el-col>
                  <el-col :xs="12" :sm="14" :md="17" :lg="17">
                    <el-select v-model="searchElectricInfo.labelStatus" size="mini" clearable placeholder="全部">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-col>
                </el-row>
              </div>
          </el-col>
           <el-col :span="7" :offset="1">
            <div class="searchWrap">
              <el-row :gutter="35">
                <el-col :xs="12" :sm="10" :md="5" :lg="5">
                 <span class="searchFont">发布日期：</span>
                </el-col>
                <el-col :xs="12" :sm="14" :md="19" :lg="19">
                <el-date-picker
                        style="width: 100%"
                        v-model="value6"
                        type="daterange"
                        align="left"
                        placeholder="选择日期范围"
                        size="mini"
                        :picker-options="pickerOptions2">
                      </el-date-picker>
                </el-col>
              </el-row>
            </div>
        </el-col>
          <div style="float: right;margin-right: 10px;">
            <el-button type="primary" size="mini" @click="searchEleInfo()">查询</el-button>
            <el-button type="primary" size="mini" @click="exportElectricInfoAll()">
              <!--<i class="iconfont icon-xiazai"></i>-->
              发布
            </el-button>
          </div>

        </el-row>
      </div>
    </div>
    <div class="tableContainer">
      <div class="tableInner" ref="tableInner">
        <el-table
          ref="multipleTable"
          :data="rows"
          stripe
          :height="tableHeight"
          @sort-change="sortChange"
          @selection-change="changeFun"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <!--@selection-change="handleSelectionChange"-->
          <el-table-column
            type="selection"
            @selection-change="changeFun"
            width="55">
          </el-table-column>

          <el-table-column
            label="批次"

            prop="a"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="b"
            sortable="custom"
            label="发布时间"
            width="125"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="c"
            label="用户号"
          >
          </el-table-column>
          <el-table-column
            prop="d"
            label="姓名"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="e"
            label="性别"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="f"
            label="信用分值"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="g"
            label="扣分次数"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="h"
            label="审核状态"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="i"
            label="发布状态"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            label="操作"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <router-link  to="/blackDetail">
                <i  class="iconfont icon-chakan" ></i>
               <!-- <el-button
                  type="text"
                  size="mini"
                >查看详情
                </el-button>-->
              </router-link>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div  style="text-align: left;margin-top: 15px;">
        <el-row :gutter="10">
          <el-col :span="13" :offset="9">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 30, 50, 100,200]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="count">
            </el-pagination>
          </el-col>
        </el-row>
      </div>
      <!--分配-->
      <el-dialog :close-on-click-modal="false" title="分配企业" :visible.sync="dialogFormVisible" >
        <el-row :gutter="10">
          <el-col :xs="12" :sm="10" :md="6" :lg="6" :offset="2">
           <span class="searchFont">分配企业：</span>
          </el-col>
          <el-col :xs="6" :sm="9" :md="12" :lg="12">
            <el-select v-model="ruleFormEdit.enterpriseId" size="mini" clearable placeholder="请选择企业">
              <el-option
                v-for="item in allCompanies"
                :key="item.enterpriseId+''"
                :label="item.enterpriseName"
                :value="item.enterpriseId+''">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <div class="buttonWrapE">
          <el-button type="primary" @click="submitFormEdit()">提交</el-button>
          <el-button @click="resetForm()">重置</el-button>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
  </div>
</template>

<script>


  export default {
    props: ["allCompanies"],
    data(){
      return {
        options: [{
          value: '1',
          label: '未审核'
        }, {
          value: '2',
          label: '审核通过'
        }, {
          value: '3',
          label: '审核不通过'
        }],
        options1: [{
          value: '1',
          label: '已发布'
        }, {
          value: '2',
          label: '已取消'
        }, {
          value: '3',
          label: '未发布'
        }],
        rows: [
          {a:"A49165165",b:"2018-10-10 12:47:19",c:"1561561654",d:"黄建",e:"男",f:"98",g:"1",h:"已审核",i:"已发布",j:"2小时",},
          {a:"A49165166",b:"2018-10-11 12:47:19",c:"1561561655",d:"黄华",e:"男",f:"97",g:"3",h:"未审核",i:"未发布",j:"2小时",},
          {a:"A49165167",b:"2018-10-12 12:47:19",c:"1561561656",d:"陈东",e:"男",f:"96",g:"2",h:"审核不通过",i:"未发布",j:"2小时",},
          {a:"A49165168",b:"2018-10-13 12:47:19",c:"1561561657",d:"胡小",e:"女",f:"95",g:"8",h:"审核通过",i:"已发布",j:"2小时",},
          {a:"A49165169",b:"2018-10-14 12:47:19",c:"1561561658",d:"陈思",e:"男",f:"94",g:"7",h:"审核不通过",i:"未发布",j:"2小时",},
          {a:"A49165164",b:"2018-10-15 12:47:19",c:"1561561659",d:"林秋",e:"男",f:"93",g:"6",h:"已审核",i:"未发布",j:"2小时",},
          {a:"A49165163",b:"2018-10-16 12:47:19",c:"1561561650",d:"李云",e:"女",f:"92",g:"2",h:"审核不通过",i:"未发布",j:"2小时",},
          {a:"A49165162",b:"2018-10-17 12:47:19",c:"1561561653",d:"陈栋",e:"女",f:"97",g:"5",h:"已审核",i:"已发布",j:"2小时",},
          {a:"A49165161",b:"2018-10-18 12:47:19",c:"1561561652",d:"李曦",e:"男",f:"90",g:"3",h:"审核通过",i:"已发布",j:"2小时",},
          {a:"A49165160",b:"2018-10-19 12:47:19",c:"1561561651",d:"王大",e:"男",f:"91",g:"8",h:"已审核",i:"已发布",j:"2小时",},
          {a:"A49165160",b:"2018-10-19 12:47:19",c:"1561561651",d:"王大",e:"男",f:"91",g:"8",h:"已审核",i:"已发布",j:"2小时",},


        ],
        multipleSelection: [],
        dialogFormVisible:false,
        checkAll: false,
        isCheckAll: false,
        currentRow: null,
        pageSize: 10,
        count: 1468,
        loading: true,
        currentPage: 1,
        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        ruleFormEdit:{
          enterpriseId:"",
          labelId:""
        },
        //以下为搜索
        labelChecked: "",
        value6: "",
        tableHeight:400,
        searchElectricInfo: {
          labelNo: "",
          enterpriseId: "",
          vehicleNo: "",
          labelStatus: "",
          beginTime: "",
          endTime: "",
          sortType: "",
          asc: "true"
        },
      }
    },
    components: {},
    created(){
//      this.getElectricInfo()

    },
    mounted(){

      this.$nextTick(()=>{
        //表格滚动
        this.tableHeight=document.querySelector(".pageWrap").clientHeight-180
      })
    },

    methods: {
      //排序
      sortChange(a) {
        if (a.column) {
          if (a.column.label == "电子标签") {
            this.searchElectricInfo.asc = !this.searchElectricInfo.asc
            this.searchElectricInfo.sortType = "labelNo"
            this.getElectricInfo()
          }else if(a.column.label == "车辆编号") {
            this.searchElectricInfo.asc = !this.searchElectricInfo.asc
            this.searchElectricInfo.sortType = "vehicleNo"
            this.getElectricInfo()
          }else {
            this.searchElectricInfo.sortType = a.prop
            this.getElectricInfo()
          }
        } else {
          this.searchElectricInfo.asc = "true", this.searchElectricInfo.sortType = ""
        }
      },
      handleEdit(index, row, key){
        this.ruleFormEdit.labelId=row.id
        if (key == 0) {  //分配
          this.dialogFormVisible=true
        } else if (key == 1) { //激活
          this.$confirm('确定激活标签号为 '+row.labelNo+' 电子标签', '确认激活', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.activateLabe()
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消激活'
            });
          });
        } else if (key == 2) { //作废
          this.$confirm('确定作废标签号为 '+row.labelNo+' 电子标签', '确认激活', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this. cancellationLabel()
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消作废'
            });
          });
        }
      },
      //作废标签
      cancellationLabel(){
        this.axios.post( process.env.API_HOST +'/ulinkLabel/delete', JSON.stringify({
          labelId:this.ruleFormEdit.labelId,
        }))
          .then(response=>{
            if(response.data.state===0){
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.getElectricInfo()
            }
          })
          .catch(error=>{
            console.log(error);
          });
      },      //激活标签
      activateLabe(){
        this.axios.post( process.env.API_HOST +'/ulinkLabel/active', JSON.stringify({
          labelId:this.ruleFormEdit.labelId,
        }))
          .then(response=>{
            if(response.data.state===0){
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.getElectricInfo()
            }
          })
          .catch(error=>{
            console.log(error);
          });
      },
      //提交分配
      submitFormEdit(){
        this.axios.post( process.env.API_HOST +'/ulinkLabel/allot', JSON.stringify({
          enterpriseId:this.ruleFormEdit.enterpriseId,
          labelId:this.ruleFormEdit.labelId,
        }))
          .then(response=>{
            if(response.data.state===0){
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.getElectricInfo()
              this.dialogFormVisible=false
            }else {

              this.dialogFormVisible=false
            }
          })
          .catch(error=>{
            console.log(error);
          });
      },
      //重置
      resetForm() {
        this.ruleFormEdit.enterpriseId = ""
      },
      //全选
      changeFun(val) {
        this.multipleSelection = val
        this.checkAll = this.rows.length == val.length
      },
      toggleSelection(rows) {
        this.isCheckAll=!this.isCheckAll
        if (rows&&this.isCheckAll) {
          this.$refs.multipleTable.clearSelection();
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      //搜索
      searchEleInfo(){
        if (this.value6[0] != null) {
          this.searchElectricInfo.beginTime = this.dtime(this.value6[0]).format('YYYY-MM-DD 00:00:00')
          this.searchElectricInfo.endTime = this.dtime(this.value6[1]).format('YYYY-MM-DD 24:00:00')

        } else if (this.value6[0] === null) {
          this.searchElectricInfo.beginTime = ""
          this.searchElectricInfo.endTime = ""
        }
        this.getElectricInfo()

      },
      //重置
      resetInfo(){
        this.searchElectricInfo.labelNo = ""
        this.searchElectricInfo.enterpriseId = ""
        this.searchElectricInfo.vehicleNo = ""
        this.searchElectricInfo.labelStatus = ""
        this.searchElectricInfo.beginTime = "";
        this.searchElectricInfo.endTime = ""
        this.value6 = ""
        this.getElectricInfo()
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.getElectricInfo()
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.getElectricInfo()

      },

      //导出
      handleChecked(key){
        let arr=[]
        this.multipleSelection.forEach((item)=>{
          arr.push(item.id)
        })
        this.ruleFormEdit.labelId=arr.join(",")
        if(this.ruleFormEdit.labelId==""){
          this.$message({
            type: 'warning',
            message: '请先勾选需要操作的标签!'
          });
          return;
        }
        if(key==0){//导出
          this.exportElectricInfo()
        }else if(key==1){//激活
          this.activateLabe()
        }else if(key==2){//分配
          this.dialogFormVisible=true
        }else if(key==3){//作废
          this.cancellationLabel()
        }

      },
      //批量导出
      exportElectricInfo(){
        let url = process.env.API_HOST + `/ulinkLabel/export?labelId=${this.ruleFormEdit.labelId}`
        this.axios.get(url, {withCredentials: true})
          .then(response => {
            if(response.data.state!=1) {
              this.$message({
                type: 'success',
                message: "导出成功"
              });
              window.location.href=url
            }
          })
      },
      //全部导出
      exportElectricInfoAll(){
        let url = process.env.API_HOST + `/ulinkLabel/batchExport?labelNo=${this.searchElectricInfo.labelNo}&enterpriseId=${this.searchElectricInfo.enterpriseId}&labelStatus=${this.searchElectricInfo.labelStatus}&beginTime=${this.searchElectricInfo.beginTime}&endTime=${this.searchElectricInfo.endTime}`
        this.axios.get(url, {withCredentials: true})
          .then(response => {
            if(response.data.state!=1){
              this.$message({
                type: 'success',
                message: "导出成功"
              });
              window.location.href=url
            }
          })
      },
      //获取所有信息
      getElectricInfo(){
        /* let url = process.env.API_HOST + `/ulinkLabel/findAll?page=${this.currentPage}&size=${this.pageSize}&sortType=${this.searchElectricInfo.sortType}&asc=${this.searchElectricInfo.asc}&rangeType=Date&rangeValue=createName&labelNo=${this.searchElectricInfo.labelNo}&enterpriseId=${this.searchElectricInfo.enterpriseId}&labelStatus=${this.searchElectricInfo.labelStatus}&beginTime=${this.searchElectricInfo.beginTime}&endTime=${this.searchElectricInfo.endTime}`
         this.axios.get(url, {withCredentials: true})
         .then(response => {
         const result = response.data
         this.rows = result.data.list
         this.count = result.data.totalCount;
         })*/

      }
    },
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  .pageWrap
    page()
    .pageTableInner
      background-color white
      border-radius 5px
      height 100%
      padding 20px
      .infoSearchWrap
        overflow hidden
        margin-bottom 5px
        font-size 14px
        background-color white
        border-radius 5px
        .infoSearchOne
          width 100%
          margin-bottom 15px
          .searchWrap
            white-space nowrap
            overflow hidden
            font-size 14px
            line-height 28px
            width 100%
            .searchFont
              margin-left 5px
              font-size 14px
              color #50545D
              font-family SourceHanSansCN-Medium
      .tableContainer
        background-color white
        border-radius 5px
        margin 0 auto
        .tableInner       //表格滚动
          width 100%
          overflow-y auto
        .buttonWrapE
          margin-top 150px
          width 100%
          text-align center




</style>
